﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<script>
    var scoped_tool_id,
        _organieId = "",//所选机构id
        _region = "",//所选区域id
        _bussinessScope = "",//经营类型
        _propertyState = "";//项目状态

    $(function () {
        InitialPage();
        // toolClickId();
        // getToolLists();
        // toolClickFunc();
        // getArea_num();
        GetGrid();
        var customFunc = new CustomFunc({
            paerentDom : "tool-panel", //渲染的节点
            url : "",  //接口地址
            definedData : [{ "name": "区域", "id": "1" }, { "name": "机构", "id": "2" }],//模拟数据
            definedCallBack : GetTree,//组件内部需要执行的外部函数
            returnData : {//获取组件返回的数据
                scoped_tool_id : scoped_tool_id,
            }
        });
        //需要返回数据时赋值
        scoped_tool_id = customFunc.tab_function();
    });
    //初始化页面
    function InitialPage() {
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize()
            }
        });
        //resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $('#gridTable').setGridWidth($('.gridPanel').width());
                $("#gridTable").setGridHeight($(window).height() - 249.5);
                $("#itemTree").setTreeHeight($(window).height() - 31.5);
            }, 200);
            e.stopPropagation();
        });
        //经营类型
        $("#BussinessScope").ComboBox({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "BussinessScope" },
            id: "value",
            text: "text",
            height: "200px"
        }).bind("change", function () {
            _bussinessScope = parseInt($("#BussinessScope").attr("data-value"));
            $("#btn_Search").trigger("click");
        });
        // $("#BussinessScope").ComboBoxSetValue(_bussinessScope);
        //项目状态
        $("#PropertyState").ComboBox({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "PropertyState" },
            id: "value",
            text: "text",
            height: "200px"
        }).bind("change", function () {
            _propertyState = parseInt($("#PropertyState").attr("data-value"));
            $("#btn_Search").trigger("click");
        });
        // $("#PropertyState").ComboBoxSetValue(_propertyState);
    }


    function GetTree(id) {
        var queryJson = {
            Type: id,
            AreaId: "310100",
            Id: "",
            IsSubstep: false
        };
        var item = {
            height: $(window).height() - 55.5,
            url: "../../ResourceManage/ZG_PStructs/GetPropertyQueryTreeJson",
            method: "POST",
            param: { queryJson: JSON.stringify(queryJson) },
            onnodeclick: function (item) {
                if (id == 1) {
                    _organieId = "";
                    _region = item.value;
                } else if (id == 2) {
                    _region = "";//所选区域id
                    _organieId = item.value;
                }
                $('#btn_Search').trigger("click");
            }
        };
        $("#itemTree_area").treeview(item);
        _organieId = "";
        _region = "";
        $('#btn_Search').trigger("click");
    }

    //加载表格
    function GetGrid() {
        var selectedRowIndex = 0;
        var queryJson = $("#queryCondition").GetWebControls();
        $gridTable = $("#gridTable");
        queryJson["OrganizeId"] = _organieId;
        queryJson["Region"] = _region;
        queryJson["BussinessScope"] = _bussinessScope;
        queryJson["PropertyState"] = _propertyState;
        queryJson["KeyWord"] = $("#txt_Keyword").val();
        $gridTable.jqGrid({
            url: "../../ResourceManage/ZG_PStructs/GetPropertyPageList",
            postData: { queryJson: JSON.stringify(queryJson) },
            datatype: "json",
            height: $(window).height() - 141.5,
            autowidth: true,
            mtype: 'POST',
            colModel: [
                { label: "主键", name: 'id', hidden: true },
                { label: "项目名称", name: "Name", width: 250, align: "left", sortable: false },
                { label: "项目编号", name: "Code", width: 200, align: "left", sortable: false },
                { label: "区域", name: "Region", width: 150, align: "left", sortable: false },
                { label: "地址", name: "Address", width: 200, align: "left", sortable: false },
                {
                    label: "项目类型", name: "ProjectCategory", width: 150, align: "left", sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        return cellvalue==null? "" : top.clientdataItem['PropertyType'][cellvalue];
                    }
                },
                { label: "组织机构", name: "OrganizeId", width: 200, align: "left", sortable: false },
                { label: "面积", name: "Area", width: 150, align: "left", sortable: false },
                { label: "房间数", name: "Count", width: 100, align: "left", sortable: false },
                { label: "描述", name: "Memo", width: 200, align: "left", sortable: false }
            ],
            viewrecords: false,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#gridPager",
            sortname: 'Address',
            sortorder: 'desc',
            rownumbers: false,
            gridview: true,
            onSelectRow: function (status) {
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            },
            gridComplete: function () {
                $("#" + this.id).setSelection(selectedRowIndex, false);
                var re_page = JSON.parse($gridTable.getGridParam('costtime'));//获取返回的当前页
                $(".total_num").text(re_page.records)
                $(".total_area").text(re_page.conditionJson)
            },

        });
        //查询事件
        $("#btn_Search").click(function () {
            var queryJson = $("#queryCondition").GetWebControls();
            queryJson["OrganizeId"] = _organieId;
            queryJson["Region"] = _region;
            queryJson["BussinessScope"] = _bussinessScope;
            queryJson["PropertyState"] = _propertyState;
            queryJson["KeyWord"] = $("#txt_Keyword").val();
            $gridTable.jqGrid('setGridParam', {
                postData: {
                    queryJson: JSON.stringify(queryJson)
                },
                page: 1
            }).trigger('reloadGrid');
        });
        //查询回车事件
        $('#txt_Keyword').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                $('#btn_Search').trigger("click");
            }
        });
    }
    //查询函数
    function searchGrid(queryJson) {
        $("#gridTable").jqGrid('setGridParam', {
            url: "../../ResourceManage/ZG_PStructs/GetPropertyPageList",
            postData: { queryJson: JSON.stringify(queryJson) },
        }).trigger('reloadGrid');
    }

</script>
<style>
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clearfix:after {
        content: "";
        display: block;
        font-size: 0;
        height: 0;
        visible: hidden;
        clear: both;
    }

    .tool-panel {
        position: relative;
        padding: 4px 17px 4px 8px;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

        .tool-panel p {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

            .tool-panel p span {
                height: 100%;
                font-size: 14px;
            }

            .tool-panel p i {
                cursor: pointer;
                margin-top: 10px;
            }

        .tool-panel ul {
            display: none;
            position: absolute;
            width: 100px;
            top: 46px;
            right: 7px;
            border-radius: 3px;
            border: 1px solid #ddd;
            background: #fafafa;
        }

            .tool-panel ul li {
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                color: #666;
                text-align: center;
                font-size: 14px;
                border-bottom: 1px solid #ddd;
            }

                .tool-panel ul li:last-child {
                    border: none;
                }

                .tool-panel ul li.active,.tool-panel ul li.active:hover {
                    background: #337ab7;
                    color: #fff;
                }

                .tool-panel ul li:hover {
                    background: #ddd;
                    color:#333;
                }
            .tool-panel ul:after {
                content: "";
                display: block;
                position: absolute;
                top: -8px;
                right: 10px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 8px solid #eee;
            }

    .total_area_num {
        right: 20px;
        bottom: 4px;
        position: absolute;
        margin-right: 40px;
        background: rgb(255,253,205);
        padding: 2px 3px;
    }

        .total_area_num span {
            display: inline-block;
        }

        .total_area_num > span {
            margin-right: 15px;
            font-size: 14px;
            color: #000;
        }
</style>
<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div class="west-Panel" style="height: 98%;">
            <div class="tool-panel">

            </div>

            <div id="itemTree_area" class="tree_item"></div>
        </div>
    </div>
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div class="titlePanel">
                <div class="title-search">
                    <table>
                        <tr>
                            <td style="padding-right:8px;">经营类型:</td>
                            <td>
                                <div id="queryCondition" class="btn-group">
                                    <div id="BussinessScope" type="select" class="ui-select" style="width: 100px;"></div>
                                </div>
                            </td>
                            <td style="padding:0px 8px 0px 15px;">项目状态:</td>
                            <td style="padding-right:15px;">
                                <div id="PropertyState" type="select" class="ui-select" style="width: 100px;"></div>
                            </td>
                            <td>
                                <input id="txt_Keyword" type="text" maxlength="20" class="form-control" placeholder="请输入要查询的项目名称" style="width: 200px;" />
                            </td>
                            <td style="padding-left:5px;">
                                <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="toolbar">
                    <div class="btn-group">
                        <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                        <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
                        <a id="lr-edit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
                        <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                        <a id="lr-map" disabled="disabled" class="btn btn-default"><i class="fa fa-map-marker"></i>&nbsp;地图</a>
                    </div>
                </div>

            </div>
            <div class="gridPanel">
                <table id="gridTable"></table>
                <div id="gridPager" style="position:relative;">
                    <p class="total_area_num">
                        <span>数量:<span class="total_num"></span></span>
                        <span>建筑面积:<span class="total_area"></span></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
